<mat-drawer-container autosize class="flex-1">
  <mat-drawer #drawer class="ngm-sidenav-container-bg-transparent" [mode]="isMobile() ? 'over' : 'side'"
    [(opened)]="sideMenuOpened" ngmResizer [resizerWidth]="272">
    
    <div class="flex justify-start items-center gap-2 p-4">
      <label class="w-10 shrink-0">{{ 'PAC.INDICATOR.Types' | translate: {Default: 'Types'} }}</label>
      <ngm-tags class="flex-1" selectable [tags]="[
        {
          value: IndicatorType.BASIC,
          label: 'PAC.INDICATOR.Basic' | translate: {Default: 'Basic'},
          color: 'blue'
        },
        {
          value: IndicatorType.DERIVE,
          label: 'PAC.INDICATOR.Derivative' | translate: {Default: 'Derivative'},
          color: 'green'
        }]"
        [(ngModel)]="types"
      ></ngm-tags>
    </div>
    <div class="flex flex-wrap justify-start items-start gap-2 p-4">
      <label class="shrink-0">{{ 'PAC.INDICATOR.Certifications' | translate: {Default: 'Certifications'} }}</label>
      <ngm-tags class="flex-1 flex-wrap" selectable [tags]="certifications()"
        [formControl]="certificationsControl"
      ></ngm-tags>
    </div>
    <div class="flex justify-start items-start gap-2 px-4 py-2">
      <label class="w-10 shrink-0">{{ 'PAC.INDICATOR.MARKET.Tags' | translate: {Default: 'Tags'} }}</label>
      <pac-tags class="flex-1 " [tags]="tags$ | async" [selectable]="true"
        (selectedChange)="onTagsChange($event)"
      ></pac-tags>
    </div>

    <div class="m-4 mb-0">
      {{ 'PAC.KEY_WORDS.BUSINESS_AREA' | translate: {Default: 'Business Area'} }}
    </div>

    <ngm-tree-select treeViewer class="flex flex-col flex-1 rounded-xl overflow-auto"
      appearance="fill"
      color="primary"
      displayDensity="cosy"
      displayBehaviour="descriptionOnly"
      searchable
      [initialLevel]="2"
      [treeNodes]="groupTree$ | async"
      [formControl]="businessArea"
    ></ngm-tree-select>

    <div ngmResizerBar resizerBarPosition="right"
         cdkDrag  
         cdkDragLockAxis="x"
    ></div>
  </mat-drawer>

  <mat-drawer-content class="flex flex-col">
    <div class="flex justify-between items-center px-4 py-2">
      <div class="flex items-center">
        <span class="text-xl">
          {{ 'PAC.INDICATOR.IndicatorMarket' | translate: {Default: "Indicator Market"} }}
        </span>
        <span class="text-sm ml-4 opacity-50">
          {{ 'PAC.MENU.INDICATOR.INDICATOR_MARKET_DESC' | translate: {Default: "Browse indicators and apply for permissions"} }}
        </span>
      </div>

      <div class="shrink-0 flex justify-end items-center">
        <pac-inline-search class="" [formControl]="search"></pac-inline-search>
    
        <div ngmButtonGroup class="flex flex-wrap">
          <!-- <mat-slide-toggle [(ngModel)]="displayCompact" class="text-sm">{{ 'PAC.KEY_WORDS.Compact' | translate: {Default: 'Compact'}  }}</mat-slide-toggle> -->
          <button mat-raised-button displayDensity="cosy" color="primary"
            [disabled]="businessAreaAuth$ | async"
            (click)="requestBusinessArea(businessArea.value)"
          >{{ 'PAC.INDICATOR.MARKET.RequestBusinessArea' | translate: {Default: 'Request Business Area'} }}</button>
        </div>
      </div>
    </div>

    <div class="pac-indicator-market__sidenav-content p-2 flex-1 h-full flex flex-col overflow-auto">
      <ng-container *ngFor="let item of indicators$ | async">
        <div class="m-2 grid grid-cols-2 md:grid-cols-6 lg:grid-cols-8 gap-2">
          <div class="col-span-2 md:col-span-6 lg:col-span-8 text-lg my-2">
            <a [routerLink]="['/indicator/viewer', item.id]">
              <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
                [content]="item.name">
              </span>
            </a>
          </div>
  
          <div class="col-span-2 md:col-span-6 lg:col-span-8 text-gray-500">
            <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
                  [content]="item.business"
                >
            </span>
          </div>
  
          <div class="text-right">
            {{ 'PAC.INDICATOR.REGISTER.CODE' | translate }}:
          </div>
          <div class="overflow-hidden text-ellipsis whitespace-nowrap">
            <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
              [content]="item.code"></span>
          </div>
  
          <div class="text-right">
            {{ 'PAC.INDICATOR.REGISTER.TYPE' | translate }}:
          </div>
          <pac-indicator-type [indicator]="item"></pac-indicator-type>
  
          <div class="text-right">
            {{ 'PAC.INDICATOR.REGISTER.Certification' | translate: {Default: 'Certification'} }}:
          </div>
          <div>
            <span *ngIf="item.certification" class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
              {{item.certification.name}}
            </span>
          </div>
  
          <div class="text-right">
            {{ 'PAC.INDICATOR.REGISTER.PRINCIPAL' | translate }}:
          </div>
          <div>{{item.principal}}</div>
  
          <div class="text-right">
            {{ 'PAC.INDICATOR.REGISTER.Tags' | translate: {Default: 'Tags'} }}:
          </div>
          <pac-tags [tags]="item.tags"></pac-tags>
  
          <div class="text-right">
            {{ 'PAC.INDICATOR.REGISTER.CREATED_AT' | translate }}:
          </div>
          <div>
            {{item.createdAt}}
          </div>
  
          <div class="text-right">
            {{ 'PAC.INDICATOR.REGISTER.BUSINESS_AREA' | translate }}:
          </div>
          <div>{{item.businessArea?.name}}</div>
  
          <div class="text-right">
            {{ 'PAC.INDICATOR.REGISTER.STATUS' | translate }}:
          </div>
          <div class="h-full flex items-start">
            <span *ngIf="item.isActive" class="flex w-3 h-3 m-1 bg-green-500 rounded-full"></span>
          </div>
        </div>
  
        <div class="my-2">
          <div class="flex justify-end">
            <div *ngIf="item.permissionRefuses">
              <mat-icon color="warn" [matBadge]="item.permissionRefuses"
                [matTooltip]="'PAC.INDICATOR.PermissionRefused' | translate: {Default: 'Permission Refused'}">block</mat-icon>
            </div>
    
            <div *ngIf="item.permissionApproved">
              <mat-icon class="text-green-600" [matTooltip]="'PAC.INDICATOR.PermissionApproved' | translate: {Default: 'Permission Approved'}">task_alt</mat-icon>
            </div>
    
            <div *ngIf="item.permissionRequests">
              <mat-icon color="accent" fontSet="material-icons-outlined"
                [matTooltip]="'PAC.INDICATOR.PermissionRequested' | translate: {Default: 'Permission Requested'}">pending</mat-icon>
            </div>
  
            <div ngmButtonGroup displayDensity="cosy" *ngIf="!item.permissionApproved && !item.permissionRequests">
              <button mat-button displayDensity="compact" [disabled]="!!item.permissionRequests" (click)="requestPermission(item.id)">
                <div class="flex justify-center items-center">
                  <mat-icon fontSet="material-icons-outlined">approval</mat-icon>
                  {{ 'PAC.INDICATOR.MARKET.REQUEST' | translate: {Default: 'Request'} }}
                </div>
              </button>
            </div>
          </div>
        </div>
  
        <mat-divider></mat-divider>
      </ng-container>
    </div>
    <ngm-drawer-trigger class="absolute -left-1 top-1/2 -translate-y-1/2 z-40" [(opened)]="sideMenuOpened" ></ngm-drawer-trigger>
  </mat-drawer-content>
</mat-drawer-container>
